<script lang="ts" setup>
import type { PropType } from 'vue'
import locale from './locale'
import useI18n from './mixins/i18n-mixins'
import { goTobyAnchorId } from '@/utils/index'

const props = defineProps({
  catalogData: {
    type: Array as PropType<{ label: string, id: string }[]>,
    required: true,
  },
  showCatalogList: {
    type: Boolean,
    default: true,
  },
})

const { currentDocLang } = useI18n()

const showCatalogList2 = ref(props.showCatalogList)
// catalog title
const catalogTitle = computed(() => {
  return locale[currentDocLang.value].anchorCatalogTitle
})

const router = useRouter()
function goAnchor(id: string) {
  goTobyAnchorId(router, id)
}

function toggleCatalogList() {
  showCatalogList2.value = !showCatalogList2.value
}
</script>

<template>
  <div v-if="catalogData && catalogData.length > 0" class="catalog-container">
    <div v-show="!showCatalogList2" class="catalog-corner" @click.stop="toggleCatalogList()">
      <span>{{ catalogTitle }}</span>
    </div>
    <ul v-show="showCatalogList2" class="catalog-ul">
      <li class="catalog-li-title" @click.stop="toggleCatalogList()">
        {{ catalogTitle }}
        <i class="catalog-li-title-down icon iconfont icon-shouqi1" />
      </li>
      <li v-for="(item, index) in catalogData" :key="index" :title="item.label" class="catalog-li">
        <a href="javascript:void(0);" @click.stop="goAnchor(item.id)">
          {{ item.label }}
        </a>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
.catalog-container {
    .catalog-corner {
        z-index: 999;
        cursor: pointer;
        display: block;
        width: 45px;
        height: 180px;
        position: fixed;
        right: 0;
        top: 120px;
        background-color: #fff;
        border-radius: 5px 0 0 5px;
        border: solid 1px #eee;
        font-size: 15px;
        padding: 60px 10px;
        line-height: 1.9;
        font-weight: bold;
        color: #666;
    }

    .catalog-ul {
        z-index: 999;
        display: block;
        list-style: none;
        min-width: 100px;
        max-width: 200px;
        margin: 0;
        padding: 10px;
        background-color: #fff;
        position: fixed;
        right: 0;
        top: 120px;
        border-radius: 3px;
        border: solid 1px #eee;
        font-size: 12px;

        .catalog-li-title {
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 10px;
            color: #666;
        }

        .catalog-corner:hover,
        .catalog-li-title:hover {
            color: #000;
        }

        .catalog-li-title-down {
            font-size: 14px;
            margin-left: 10px;
        }

        .catalog-li {
            line-height: 2.1em;
            display: list-item;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
